<template>
    <div class="xfn-category-list">
        <el-breadcrumb>
            <el-breadcrumb-item to="/main">首页</el-breadcrumb-item> 
            <el-breadcrumb-item to="/main">菜品类别管理</el-breadcrumb-item> 
            <el-breadcrumb-item to="/main">类别列表</el-breadcrumb-item> 
        </el-breadcrumb>
            <br>
        <el-button size="medium" @click="addList" type="primary">添加新的菜品类别</el-button>
            <br>
            <br>
        <el-table :data="dataList" :stripe="true" :border="true" style="width:100%"    >
            <el-table-column prop="cid" label="菜品编号" width="180"></el-table-column>
            <el-table-column prop="cname" label="菜品名称" ></el-table-column>
            <el-table-column label="操作"   >
                <!-- 插槽解构将循环依赖对象 可能需要用到的变量 传给方法 此处row.cid  等效于 dataList[i].cid  $index = 下标  -->
                <template slot-scope="{ $index,row }">
                    <el-button type="success" @click="updateCategory(row.cid,$index)">修改</el-button>
                    <el-button type="danger" @click="deleteCategory(row.cid,$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data(){
        return { 
            dataList:[]
        }
    },
    //钩子函数 挂载完成
    mounted(){
        //获取一次菜品列表
       this.getCategory();
    },
    methods:{
        // 封装一下获取当前菜品列表的axios 复用
        getCategory(){
             let url = this.$store.state.globalSettings.apiUrl + '/admin/category'
                this.axios.get(url).then(res=>{
                    // console.log(res.data)
                    this.dataList = res.data;
                }).catch(err=>{
                    console.log(err)
                })
        },
        // 新增类目
        addList(){
            //弹出输入框 让用户新增菜品
              this.$prompt('请输入新的菜品类别名:','提示',{
                type:'info'
              }).then(res=>{
                  console.log(res.value);
                  //传递符合服务器要求字段
                  let data = {cname:res.value} 
                  //发送axios向服务器新增菜品类
                    let url = this.$store.state.globalSettings.apiUrl +'/admin/category';
                    this.axios.post(url,data).then(result=>{
                        if(result.data.code==200){
                            this.getCategory();
                        }
                    }) 
              }).catch(err=>{
                  console.log('增加取消..')
              }) 
        },
        //修改类目
        updateCategory(cid,i){
            console.log(cid);
           let url = this.$store.state.globalSettings.apiUrl+ '/admin/category';
         
           //弹出提示框
           this.$prompt('请输入要修改菜品名!注意菜品名不能重复!','提示',{type:'info'}).then(res=>{
               console.log(res.value); 
                 let data ={
                    cname:res.value,
                    cid:cid
                }
               //根据传入的菜品名调用接口进行修改菜品
               this.axios.put(url,data).then(result=>{
                   if(result.data.code==200){
                    //更新列表
                    this.getCategory();
                   } 
               }).catch(err=>{
                   console.log('取消修改')
               })
           })
        },
        //删除类目
        deleteCategory(cid,i){
            console.log(cid);
             //根据传入的cid 删除类目
            let url = this.$store.state.globalSettings.apiUrl +`/admin/category/+${cid}`;
            //确认是否删除
            this.$confirm('删除操作不可逆,是否确认删除?','提示',{
                type:'warning'
            }).then(()=>{
                //开始删除
                this.axios.delete(url).then(res=>{
                //如果删除成功
                if(res.data.code==200){
                    console.log(res.data);
                    //删除成功后立即更新列表 刷新dom
                    this.$message({
                    showClose: true,
                    message: '删除成功!',
                    type:'success'
                    });
                    this.getCategory();
                }
            }).catch(err=>{
                console.log('删除错误..!')
            })
            })
        },
        
        
    }
}
</script>
 

 <style lang="scss">
    .cell{text-align: center;}
 </style>